<template>
  <div>
    <h1>App</h1>
    <!-- 父子双向通信 -->
    <!-- <Child :count="count" @setCount="setCount" /> -->
    <!-- 
      v-bind指令的修饰符：.sync 
        完整写法  v-bind:xxx.sync="xxx"  
        简写      :xxx.sync="xxx"  

        一共做了两件事：
          传递props数据：xxx
          绑定自定义事件：update:xxx
            触发自定义事件传递的第一个参数，就会修改数据的值

        例如：:count.sync="count"
          传递count数据
          绑定update:count自定义事件
            触发事件传递的第一个参数，count的值就会更新
    -->
    <Child :count.sync="count" />
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  // methods: {
  //   setCount() {
  //     this.count++;
  //   },
  // },
  components: {
    Child,
  },
};
</script>

<style></style>
